<template>
  <div class="rankingList banner">
    <div class="rankingList_top">
      <img src="/static/rankingList/fengmian01.jpg" alt="">
      <h1>排行榜</h1>
    </div>
    <div class="">
      <div v-for="(rItem,rIndex) in rankingList" :key="rItem.pId" class="rankingList_list">
        <h2 class="rankingList_list_index">{{rIndex+1}}</h2>
        <subassembly :attrs="rItem" class="rankingList_list_content"></subassembly>
        <div class="rankingList_list_grade">
          <span class="rankingList_list_grade_num">{{rItem.replyNums+rItem.viewNums}}</span>
          <span>综合评分</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import subassembly from '../home/HomeSubassembly.vue'
export default {
  name:'RankingList',
  components:{
    subassembly
  },
  data(){
    return {
      rankingList:[]
    }
  },
  created(){
    this.getHotMes()
  },
  methods:{
    getHotMes () {
      const params = {
        num: 15
      }
      this.$axios.getHotPost(params).then(res => {
        this.rankingList = res.data
        // console.log(res.data)
      })
    },
  }
}
</script>
<style scoped>
  .rankingList {

  }
  .rankingList_top {
    position: relative;
  }
  .rankingList_top>img {
    width: 100%;
    height: 200px;
  }
  .rankingList_top>h1 {
    position: absolute;
    bottom: 30%;
    left: 40%;
    font-size: 50px;
  }
  .rankingList_list {
    display: flex;
    align-items: center;
  }
  .rankingList_list_index {
    color: rgb(112 197 245);
    font-size: 40px;
  }
  .rankingList_list_content {
    /* flex: 10; */
    width: 1000px;
  }
  .rankingList_list_grade {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 900;
  }
  .rankingList_list_grade_num {
    font-size: 25px;
    color: rgb(112 197 245);
  }
</style>
